<template>
  <div style="text-align: left;">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">我的课程</el-menu-item>
    </el-menu>
    <el-row v-for="item in aaaa" :key="item.id"
            style="border-bottom: #cccccc solid 1px;padding-top: 10px;padding-bottom: 10px" type="flex" justify="start">
      <el-col :span="20" class="course_content">
        <div style="display: inline-block; float: left; margin: 5px;">
          <img :src="item.courseImage" class="avatar">
        </div>
        <div style="display: inline-block; float: left">
          <div style="margin-left: 10px;">
            <p class="course_name">{{ item.courseName }}</p>
            <p class="course_study">上次学习：{{ item.jname }}</p>
            <p class="course_time">学习时间：：{{ item.gmtCreate }}</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="bg-purple">
          <el-button type="info" plain @click="accessStudy(item.id,item.courseId)">进入学习</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MyCourse",
  data() {
    return {
      aaaa: [],
      activeIndex: '1',
    }
  },
  created() {
    this.findAll();
  },
  methods: {
    accessStudy(id,courseId){
      //传主键到课程播放页面
      this.$router.push({
        /*//路径名
        path: '/MyCollection',
        query: {
          id:id,
          courseId:courseId
          //alert(JSON.stringify()+"SSS")

          /!*
          this.$route.query.id
          通过这个接收
          *!/
    }*/
      })
    },
    findAll(){
      this.$axios.get("leadingEnd-curriculum/ronco/user-course/findAll").then(r => {
        this.aaaa=r.data;
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>
.avatar {
  width: 180px;
  height: 100px;
  display: block;
  margin-left: 10px;
}
.course_content p{
  height: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 16px;
}
.course_name{
  font-size: 16px;
  left: 205px;
  color: #999;
}
.course_study{
  font-size: 16px;
  left: 205px;
  color: #999;
}
.course_time{
  font-size: 16px;
  left: 205px;
  color: #999;
}
.el-row--flex{
  margin-bottom: 0;
}
</style>
